<template>
	<!-- 	<view class="" style="height: 100vh;background-color: #f5f5f5;">
			<view class="" style="">
				<view class="card " style="height: 80px;align-items: center;width: 100%;margin-bottom: 10px;background-color: #fff;">
					<view class="u-flex-between" style="padding: 0 10px;height: 80px;">
						<view class="u-flex card-item">
							<view class="left">
								<view class="u-flex-center" style="padding-bottom: 10px;">
									<view class="mr-5" style="font-size: 14px;">
										江西网点
									</view>
									<view class="text-gray" style="font-size: 12px;">
										销售人员,维修师傅
									</view>
								</view>
								<view class="" class="text-gray" style="font-size: 12px;">
									美的集团有限公司
								</view>
							</view>
						</view>
						<view class="text-gray right u-flex-center" style="display: flex;align-items: center;font-size: 14px;" @click="reSwitch">
							切换角色
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
		
				<view class="card" style="height: 46px;align-items: center;width: 100%;margin-bottom: 10px;background-color: #fff;">
					<view class="u-flex-between" style="padding: 0 10px;height: 46px;">
						<view class="u-flex card-item">
							<view class="left">
								<view class="u-flex-center">
									<view class="mr-5" style="font-size: 14px;">
										绑定手机
									</view>
								</view>
							</view>
						</view>
						<view class="text-gray right u-flex-center" style="display: flex;align-items: center;font-size: 14px;" @click="go">
							15618190181
						</view>
					</view>
				</view>
				<view class="card" style="height: 46px;align-items: center;width: 100%;margin-bottom: 10px;background-color: #fff;">
					<view class="u-flex-between" style="padding: 0 10px;height: 46px;">
						<view class="u-flex card-item">
							<view class="left">
								<view class="u-flex-center" >
									<view class="mr-5" style="font-size: 14px;" >
										组织架构
									</view>
								</view>
							</view>
						</view>
						<view class="text-gray right u-flex-center" style="display: flex;align-items: center;font-size: 14px;" >
							<u-icon name="arrow-right" @click="goOrganization"></u-icon>
						</view>
					</view>
				</view>
				<view class="card" style="height: 46px;align-items: center;width: 100%;margin-bottom: 10px;background-color: #fff;">
					<view class="u-flex-between" style="padding: 0 10px;height: 46px;">
						<view class="u-flex card-item">
							<view class="left">
								<view class="u-flex-center" >
									<view class="mr-5" style="font-size: 14px;" >
										角色权限
									</view>
								</view>
							</view>
						</view>
						<view class="text-gray right u-flex-center" style="display: flex;align-items: center;font-size: 14px;" >
							<u-icon name="arrow-right" @click="goAuthority"></u-icon>
						</view>
					</view>
				</view>
				<view class="card" style="height: 46px;align-items: center;width: 100%;margin-bottom: 10px;background-color: #fff;">
					<view class="u-flex-between" style="padding: 0 10px;height: 46px;">
						<view class="u-flex card-item">
							<view class="left">
								<view class="u-flex-center" >
									<view class="mr-5" style="font-size: 14px;">
										退出登录
									</view>
								</view>
							</view>
						</view>
						<view class="text-gray right u-flex-center" style="display: flex;align-items: center;font-size: 14px;" @click="go">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
	</view> -->



	<view class="user-content">
		
		<view class="" style="padding: 30rpx;">
			<view class="u-flex-between user-info ">
				<view class="u-flex-between">
					<view class="user-img">
						<u-avatar :src="headImg" size="112" shape="circle"></u-avatar>
					</view>
					<view class="">
						<view class="user-name">
							{{name}}
						</view>
						<view class="u-flex" style="margin-top: 12rpx;">
							<view class="u-flex">
								<u-icon name="phone-fill" color="#fd7400" size="38"></u-icon>
							</view>
							<view class="text-gray u-flex mes">
								{{phone}}
							</view>
						</view>
					</view>
				</view>
				<view class="check" @click="reSwitch">
					<u-icon name="account" color="#333" size="56"></u-icon>
					<view class="">
						切换
					</view>
				</view>
			</view>
			<view class="card-list">
				<view class="card">
					<!-- 	<view class="card-item  u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="edit-pen-fill" color="#fd7400" size="56" ></u-icon>
							</view>
							<view class="u-flex-center f700">
								修改资料
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view> -->
					<!-- <view class="card-item u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="grid-fill" color="#fd7400" size="56" ></u-icon>
							</view>
							
							<view class="u-flex-center f700">
								功能模块设置
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view> -->
				</view>
				<!--  -->
				<view class="card">
					<view class="card-item  u-flex-between" @click="goOrganization">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="plus-people-fill" color="#fd7400" size="56"></u-icon>
							</view>
							<view class="u-flex-center f700 ">
								成员账号管理
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view>
					<view class="card-item u-flex-between" @click="goAuthority">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="setting-fill" color="#fd7400" size="56"></u-icon>
							</view>
							<view class="u-flex-center f700">
								角色权限管理
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view>
					<!-- <view class="card-item u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="calendar-fill" color="#fd7400" size="56" ></u-icon>
							</view>
							<view class="u-flex-center f700">
								访客数据授权
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view> -->
				</view>
				<!--  -->

				<!--  -->
				<view class="card">
					<!-- <view class="card-item  u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="bell-fill" color="#fd7400" size="56" ></u-icon>
							</view>
							<view class="u-flex-center f700 ">
								消息提醒推送
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view>
					<view class="card-item u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="question-circle-fill" color="#fd7400" size="56" ></u-icon>
							</view>
							<view class="u-flex-center f700">
								使用帮助手册
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view> -->
					<!-- <view class="card-item u-flex-between" @click="changeUser">
						<view class="left u-flex">
							<view class="mr-10">
								<u-icon name="server-man" color="#fd7400" size="56" ></u-icon>
							</view>
							<view class="u-flex-center f700">
								联系在线客服
							</view>
						</view>
						<view class="right u-flex-center">
							<u-icon name="arrow-right" color="color: rgb(196, 196, 196);" size="28"></u-icon>
						</view>
					</view> -->
				</view>
			</view>

		</view>
			<view class="outLClass">
				<u-button type="primary" @click="outLogin" shape="square" :customStyle="orangeBtn">退出登录</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: '',
				orangeBtn: {
					height: '50px !important',
					// boxShadow: '0 7px 40px rgba(235 151 43 / 30%)',
					background: 'linear-gradient(90deg, rgba(253, 116, 0, 1) 0%, rgba(255, 87, 51, 1) 100%)',
					border: '0',
					boxShadow: '0px 7px 40px  rgba(253, 112, 8, 0.2)',
					borderRadius: '8px',
					fontSize: "18px"
				},
				name: '',
				phone: '',
				headImg: '',
			}
		},
		onLoad() {
			let a = uni.getStorageSync('data')
			a = JSON.parse(decodeURIComponent(a))
			console.log(a)
			this.headimg = a.headimg
			this.name = a.name
			this.phone = a.phone
		},
		methods: {
			outLogin() {
				// uni.showToast({
				// 	title: '退出登录成功',
				// 	icon: "none",
				// });
				console.log('outLogin', )
				uni.showModal({
					content: '是否退出登录',
					confirmColor: "#fd7400",
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
							console.log('点击了', this.value)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				// setTimeout(function() {
				// 	uni.hideToast();

				// }, 1000);

			},
			reSwitch() {
				let data = uni.getStorageSync('data');
				console.log('reSwitch', this.go)
				// if (data) {
				// 	uni.navigateTo({
				// 		url: `../login/applytip?data=${data}`
				// 	})
				// } else {
				// 	this.go()
				// }
			},
			changeUser() {
				uni.showToast({
					title: '此功能正在开发',
					icon: "none",

				});
			},
			goAuthority() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
					uni.navigateTo({
						url: '../../pagesA/pages/authority/authority'
					})
				}, 2000);
			},
			goOrganization() {
				uni.navigateTo({
					url: '../../pagesA/pages/organization/organization'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-content {
		box-sizing: border-box;
		width: 100%;
		background: #fff3e885;
		height: 100vh;

		.user-info {
			padding: 62rpx 30rpx;
			display: flex;
			background-color: #fff;
			border-radius: 20rpx;

			.user-img {
				margin-right: 30rpx;
			}

			.user-name {
				font-size: 40rpx;
				font-weight: 700;
			}

			.mes {
				font-size: 26rpx;
				margin-left: 4px;
			}

			.right {
				width: 100%;
			}
		}

		.card-list {
			min-height: 62vh;

			.card {
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.card-item {
					padding: 30rpx 30rpx;
				}
			}
		}

		.outLClass {
			bottom: 10rpx;
			width: 100%;
			position: fixed;
			width: 100%;
			bottom: 30rpx;
			padding: 0 30rpx;

		}
	}
</style>